<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<html lang="en" manifest="/resources/demo.manifest">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Admin index</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="/resources/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/resources/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="txm blog"/>
    <link rel="stylesheet" href="/resources/css/amazeui/amazeui.min.css"/>
    <link rel="stylesheet" href="/resources/css/amazeui/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/resources/css/app/app.css">
    <script src="/resources/js/jquery/jquery-3.1.1.min.js"></script>
</head>

<body data-type="login">
<div class="am-g tpl-g">
    <div class="tpl-skiner">
        <div class="tpl-skiner-toggle am-icon-cog">
        </div>
        <div class="tpl-skiner-content">
            <div class="tpl-skiner-content-title">
                选择主题
            </div>
            <div class="tpl-skiner-content-bar">
                <span class="skiner-color skiner-white" data-color="theme-white"></span>
                <span class="skiner-color skiner-black" data-color="theme-black"></span>
            </div>
        </div>
    </div>
    <div class="tpl-login">
        <div class="tpl-login-content">
            <div class="tpl-login-logo">
            </div>
            <spring:htmlEscape defaultHtmlEscape="true"/>
            <form class="am-form tpl-form-line-form data-am-validator" method="post"
                  action="/sign-idddn.jsp" id="form">
                <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
                <div class="am-form-group">
                    <input type="text" minlength="3" maxlength="20" class="tpl-form-input" name="username"
                           placeholder="请输入账号" required>
                </div>

                <div class="am-form-group">
                    <input type="password" minlength="3" maxlength="20" class="tpl-form-input" name="password"
                           placeholder="请输入密码" required>
                </div>
                <div class="am-form-group">
                    <div class="field am-input-group am-input-group-primary">
                        <input type="text" placeholder="验证码" data-validate="required:验证码不能为空" name="kaptchaSessionKey"
                               required maxlength="4" minlength="4">
                        <span class="am-input-group-btn"><img src="/randomCode.jpg"
                                                              onclick="$(this).attr('src','/randomCode.jpg')"/></span>
                    </div>
                </div>
                <div class="input-group" style="color:#32c5d2">
                    <div class="checkbox">
                        <label><input type="checkbox" id="rememberme" name="remember-me"> Remember Me</label>
                    </div>
                </div>
                <div class="am-form-group">
                    <button
                            class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn am-btn-secondary">
                        提交
                    </button>


                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        options = {
            // 是否使用 H5 原生表单验证，不支持浏览器会自动退化到 JS 验证
            H5validation: false,

            // 内置规则的 H5 input type，这些 type 无需添加 pattern
            H5inputType: ['email', 'url', 'number'],

            // 验证正则
            // key1: /^...$/，包含 `js-pattern-key1` 的域会自动应用改正则
            patterns: {},

            // 规则 class 钩子前缀
            patternClassPrefix: 'js-pattern-',

            activeClass: 'am-active',

            // 验证不通过时添加到域上的 class
            inValidClass: 'am-field-error',

            // 验证通过时添加到域上的 class
            validClass: 'am-field-valid',

            // 表单提交的时候验证
            validateOnSubmit: true,

            // 表单提交时验证的域
            // Elements to validate with allValid (only validating visible elements)
            // :input: selects all input, textarea, select and button elements.
            // @since 2.5: move `:visible` to `ignore` option, became to `:hidden`
            allFields: ':input:not(:button, :disabled, .am-novalidate)',

            // 表单提交时验证的忽略的域
            // ignored elements
            // @since 2.5
            ignore: ':hidden:not([data-am-selected], .am-validate)',

            // 调用 validate() 方法的自定义事件
            customEvents: 'validate',

            // 下列元素触发以下事件时会调用验证程序
            keyboardFields: ':input:not(:button, :disabled,.am-novalidate)',
            keyboardEvents: 'focusout, change', // keyup, focusin

            // 标记为 `.am-active` (发生错误以后添加此 class)的元素 keyup 时验证
            activeKeyup: false,

            // textarea[maxlength] 的元素 keyup 时验证
            textareaMaxlenthKeyup: true,

            // 鼠标点击下列元素时会调用验证程序
            pointerFields: 'input[type="range"]:not(:disabled, .am-novalidate), ' +
            'input[type="radio"]:not(:disabled, .am-novalidate), ' +
            'input[type="checkbox"]:not(:disabled, .am-novalidate), ' +
            'select:not(:disabled, .am-novalidate), ' +
            'option:not(:disabled, .am-novalidate)',
            pointerEvents: 'click',

            // 域通过验证时回调
            onValid: function (validity) {
            },

            // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
            onInValid: function (validity) {
            },

            // 域验证通过时添加的操作，通过该接口可定义各种验证提示
            markValid: function (validity) {
                // this is Validator instance
                var options = this.options;
                var $field = $(validity.field);
                var $parent = $field.closest('.am-form-group');
                $field.addClass(options.validClass).removeClass(options.inValidClass);

                $parent.addClass('am-form-success').removeClass('am-form-error');

                options.onValid.call(this, validity);
            },

            // 域验证失败时添加的操作，通过该接口可定义各种验证提示
            markInValid: function (validity) {
                var options = this.options;
                var $field = $(validity.field);
                var $parent = $field.closest('.am-form-group');
                $field.addClass(options.inValidClass + ' ' + options.activeClass).removeClass(options.validClass);

                $parent.addClass('am-form-error').removeClass('am-form-success');

                options.onInValid.call(this, validity);
            },

            // 自定义验证程序接口，详见示例
            validate: function (validity) {
                return validity;
                /*      $.post($('#form').attr('action'),$('#form').serialize(),function (data) {
                 alert(data.message);
                 })*/
            },

            // 定义表单提交处理程序
            //   - 如果没有定义且 `validateOnSubmit` 为 `true` 时，提交时会验证整个表单
            //   - 如果定义了表单提交处理程序，`validateOnSubmit` 将会失效
            //        function(e) {
            //          // 通过 this.isFormValid() 获取表单验证状态
            //          // 注意： 如果自定义验证程序而且自定义验证程序中包含异步验证的话 this.isFormValid() 返回的是 Promise，不是布尔值
            //          // Do something...
            //        }
            submit: null


        };
        $('#form').validator(options);

    });
</script>
<a href="http://webscan.360.cn/index/checkwebsite/url/tangxinmao.yicp.io"><img border="0"
                                                                               src="http://img.webscan.360.cn/status/pai/hash/475d83b1efd847f94866c4bff9cdbf77"/></a>
<script src="/resources/js/amazeui/amazeui.min.js"></script>
<script src="/resources/js/amazeui/theme.js"></script>
<%--<script src="/resources/js/app/app.js"></script>--%>
</body>

</html>